<template>
  <view class="container">
    <view
        class="product-container"
        :style="{'--layout-width' : 100 / props.column - props.columnSpace + '%'}"
        v-for="(numVal, index) in props.column"
        :key="numVal"
    >
      <view class="product-item" v-for="(item, j) in props.groupProductList[index]" :key="j">
        <image class="img-tip" :src="item.headImageUrl" mode="widthFix" lazy-load />
        <view class="other-info-container">
          <view class="product-name">
            {{item.name}}
          </view>
          <view class="sale-price-container flex justify-between items-center">
            <view class="product-price">
              {{item.minPrice}}
            </view>
            <view class="buy-btn" @click="handleNavPage(item)">购买</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
  import {ref, reactive} from "vue";

  const props = defineProps({
    // 列数
    column:{
      type: Number,
      default: 2
    },
    // 瀑布列宽间距
    columnSpace:{
      type: Number,
      default: 2
    },
    groupProductList: {
      type: Array,
      default: []
    }
  });
  const emits = defineEmits(["navPage"]);

  const handleNavPage = (item) => {
    emits("navPage",item);
  };
</script>

<style lang="scss" scoped>
  .container {
    display: flex;
    justify-content: space-between;
    $borderRadius: 12rpx;
    .product-container {
      width: var(--layout-width);
      .product-item {
        width: 100%;
        margin-bottom: 30rpx;
        border-radius: $borderRadius;
        box-shadow: 0rpx 3rpx 6rpx rgba(0, 46, 37, 0.08);
        background: #ffffff;
        .img-tip {
          width: 100%;
          border-radius: $borderRadius $borderRadius 0 0;
        }
        .other-info-container {
          padding: 10rpx 12rpx 20rpx 12rpx;
          .product-name {
            font-size: 25rpx;
            font-weight: bold;
          }
          .sale-price-container {
            padding-top: 13rpx;
            .product-price {
              font-size: 41.5rpx;
              font-weight: bold;
              color: #AA5414;
            }
            .product-price:before {
              content: "￥";
              font-size: 22.5rpx;
            }
            .buy-btn {
              padding: 15rpx 45rpx;
              font-size: 25rpx;
              border-radius: 10rpx;
              color: #FFFFFF;
              background-color: #1B9C61;
            }
          }
        }
      }
    }
  }
</style>
